class MonthlyCardRecharge extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            parkId: this.props.parkId,
            months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
            proAbbr: ['京', '津', '沪', '渝', '冀', '豫', '云', '辽', '黑', '湘', '皖', '鲁', '新', '苏', '浙', '赣', '鄂', '桂', '甘', '晋', '蒙', '陕', '吉', '闽', '贵', '粤', '青', '藏', '川', '宁', '琼', '使'],
            letters: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
            monthlyCardPayInfo: ''
        }
    }

    componentDidMount() {
        this.verify = {
            plateNumber: (value) => {
                let r = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z0-9]{1}[A-Z0-9挂学警港澳]{4,5}$/;
                value = this.refs.proAbbr.value + this.refs.letter.value + value;
                if (!r.test(value)) {
                    return '车牌号码错误！';
                }
            }
        };
    }

    dataChange() {
        this.setState({
            monthlyCardPayInfo: ''
        })
    }

    btnSubmit() {
        postJson("/car/carInfo/getMonthlyCardOrder.x", {
            commCode: this.refs.buildingSelectList.commCode,
            parkId: this.refs.parkSelectList.getDefValue(),
            plateNumber: this.refs.proAbbr.value + this.refs.letter.value + this.refs.plateNumber.value,
            months: this.refs.months.value
        }, (data) => {
            data.data.detail = JSON.parse(data.data.detail);
            console.log("data", data);
            this.setState({
                monthlyCardPayInfo: data.data
            })
        });
    }

    selectCallback(commCode) {
        this.refs.parkSelectList.queryList(commCode);
    }

    render() {
        return <Frame header="月卡缴费">
            <div style={{width: '50%', float: 'left', display: 'inline-block'}}>
                <Form type="pane" verify={() => {
                    return this.verify;
                }}>
                    <Item>
                        <LayuiCommSelect
                            formLabelName="小区选择"
                            mask={['building', 'unit', 'floor', 'room']}
                            ref="buildingSelectList"
                            onChangeComm={(comm) => this.selectCallback(comm)}/>
                    </Item>
                    <Item>
                        <Label>停车场选择</Label>
                        <ParkSelectList
                            ref="parkSelectList"
                            isNotItem={true}
                            selectCallback={(value) => this.dataChange()}/>
                    </Item>
                    <Item>
                        <Label>车牌号码</Label>
                        <Select style={{width: '55px'}}
                                ref="proAbbr"
                                onChange={() => this.dataChange()}>
                            <option value="粤">粤</option>
                            {
                                this.state.proAbbr.map((array) => {
                                    return <option value={array}>{array}</option>
                                })
                            }
                        </Select>
                        <Select style={{width: '55px', marginLeft: '-11px'}} ref="letter"
                                onChange={() => this.dataChange()}>
                            <option value="B">B</option>
                            {
                                this.state.letters.map((letter) => {
                                    return <option value={letter}>{letter}</option>
                                })
                            }
                        </Select>
                        <Input style={{width: '83px', marginLeft: '-11px'}}
                               type="text"
                               ref="plateNumber"
                               lay-verify="plateNumber"
                               onChange={() => this.dataChange()}/>
                    </Item>
                    <Item>
                        <Label>充值月数</Label>
                        <Select ref="months"
                                onChange={() => this.dataChange()}>
                            {
                                this.state.months.map((month) => {
                                    return <option value={month}>{month + '个月'}</option>
                                })
                            }
                        </Select>
                    </Item>
                    <Item>
                        <Button btnType="normal" size="sm" formBtn="true" id="savebt" lay-submit="true"
                                onClick={() => this.btnSubmit()}>确定充值</Button>
                    </Item>
                </Form>
            </div>
            <div style={{display: 'inline-block', width: '50%', float: 'right'}}>
                {this.state.monthlyCardPayInfo ?

                    <div>
                        <div style={{float: 'left'}}>
                            <img style={{height: '250px'}}
                                 src={'/car/carInfo/qrcode.x?parkId=' + this.state.monthlyCardPayInfo.detail.parkId + '&orderId=' + this.state.monthlyCardPayInfo.id}/>
                        </div>
                        <Table className="layui-table" lay-even lay-skin="nob" style={{maxWidth: '300px'}}>
                            <colgroup>
                                <col width="135"/>
                                <col width="150"/>
                            </colgroup>
                            <tbody>
                            <tr>
                                <td>车牌：</td>
                                <td>{this.state.monthlyCardPayInfo.detail.plateNumber}</td>
                            </tr>
                            <tr>
                                <td>续费月数：</td>
                                <td>{this.state.monthlyCardPayInfo.detail.months}</td>
                            </tr>
                            <tr>
                                <td>缴费金额：</td>
                                <td>{this.state.monthlyCardPayInfo.detail.totalFee}</td>
                            </tr>
                            <tr>
                                <td>实际金额：</td>
                                <td>{this.state.monthlyCardPayInfo.detail.actualTotalFee}</td>
                            </tr>
                            <tr>
                                <td>续费前到期时间：</td>
                                <td>{this.state.monthlyCardPayInfo.detail.expirationTime}</td>
                            </tr>
                            <tr>
                                <td>续费后到期时间：</td>
                                <td>{this.state.monthlyCardPayInfo.detail.renewExpirationTime}</td>
                            </tr>
                            </tbody>
                        </Table>
                    </div> : ''}

            </div>
        </Frame>
    }
}

ReactDOM
    .render(
        <MonthlyCardRecharge/>,
        document
            .getElementById(
                'root'
            ))
;